<!--
 * @Author: 赵宇
 * @Description: 这是支付页面
 * @Date: 2024-02-15 23:45:33
 * @LastEditTime: 2024-11-27 22:48:57
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \dance\pages\pay\pay.vue
-->
<template>
  <view class="pay">
    <!-- 头部 -->
    <uv-status-bar bgColor="#fafafa"></uv-status-bar>
    <!--自定义头部 -->
    <z-navbar title="选课信息"></z-navbar>
    <view class="pay-content">
      <view class="pay-info">
        <view class="box">
          <view class="box-title">
            <text>{{ rData.lesson?.name }}</text>
          </view>
          <view class="box-teacher">
            <uv-avatar
              :src="rData.lesson?.teacher.profilePhoto || defaultImages[2]"
              :customStyle="{
                borderRadius: '20.93rpx',
                overflow: 'hidden'
              }"
              shape="square"
              size="120rpx"
              mode="aspectFill"
            ></uv-avatar>
            <view class="box-teacher-info">
              <text class="name"> {{ rData.lesson?.teacher.username }}</text>
              <view class="time">{{ rData.issueDate }} </view>
              <view class="week"> {{ rData.week }} {{ rData.timeDuration }} </view>
            </view>
          </view>
          <view class="box-merchant" v-if="Number(rData.lesson?.personage) === 0">
            <uv-avatar
              :src="(rData.lesson?.merchant?.licenses?.length && rData.lesson?.merchant?.licenses[0].imgPath) || defaultImages[2]"
              :customStyle="{
                borderRadius: '20.93rpx',
                overflow: 'hidden'
              }"
              shape="square"
              size="120rpx"
              mode="aspectFill"
            ></uv-avatar>
            <view class="box-merchant-address">
              <view class="name">
                <text>{{ rData.lesson?.merchant.headquater.name }}</text>
                <text class="name-tips">({{ rData.lesson?.merchant.name }})</text>
              </view>
              <view class="address" v-if="Number(rData.lesson?.personage) === 0">
                <template v-if="rData.lesson.merchant.location?.province">
                  {{ rData.lesson.merchant.location.province }}{{ rData.lesson.merchant.location.city }}{{ rData.lesson.merchant.location.district }}
                  {{ rData.lesson.merchant.location.detail }}
                </template>
                <template v-else> 暂无地址 </template>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="pay-wx">
        <view class="pay-wx-label"> 微信支付 </view>
        <view class="pay-wx-oper">
          <view class="alert">使用微信支付</view>
          <view class="radio-button">
            <view class="circle"></view>
          </view>
        </view>
      </view>
      <view class="pay-money">
        <view class="pay-money-tips">
          购买后将生成二维码，请去门店核销后再进入教室上课。开课前2小时将不能退款，请谨慎购买。如购买后想要退款，请尽快与客服联系。
        </view>
        <view>
          <uv-line color="#e5e5e5" margin="26.163rpx 0 41.86rpx 0"></uv-line>
        </view>
        <view class="pay-money-footer">
          <view class="fw-b">总价</view>
          <view class="pay-money-number">
            <text class="pay-money-number-icon">￥</text>
            <text class="pay-money-number-text">{{ rData?.inter }}</text>
            <text class="pay-money-number-decimal">.{{ rData?.decimal }}</text>
          </view>
        </view>
      </view>
      <uv-safe-bottom></uv-safe-bottom>
    </view>

    <view class="pay-footer">
      <view class="pay-footer-total" v-if="wxSelect">
        <view class="number">
          <text class="total">合计：</text>
          <text class="decimal">￥</text>
          <text class="text">{{ rData?.inter }}</text>
          <text class="decimal">.{{ rData?.decimal }}</text>
        </view>
      </view>
      <view class="pay-footer-btn" @click="httpPay">立即支付</view>
      <!--   <view class="pay-footer-btn" @click="httpPay">微信支付</view>-->
    </view>
    <uv-toast ref="toastRef"></uv-toast>
  </view>
</template>

<script setup>
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import { defaultImages, defaultPropImg } from '@/common/js/global';
  import { computed, reactive, ref } from 'vue';
  import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js';
  import { getWeek } from '@/common/js/fn';
  import wxs from '../../uni_modules/uv-swipe-action/components/uv-swipe-action-item/wxs';
  const toastRef = ref();
  let routerVal = reactive({
    id: ''
  });
  // 请求的数据
  let httpData = reactive({
    data: {}
  });

  let rData = computed(() => {
    return httpData.data;
  });
  // 获取远程数据
  onLoad(async option => {
    routerVal.id = Number(option.id);
  });
  onShow(() => {
    getOrderData();
  });
  // 获取订单信息
  const getOrderData = async () => {
    // 获取价格等信息
    const data = await uni.$uv.http.post('app/lesson/show', {
      id: routerVal.id
    });
    let { lesson, issues = [] } = data;
    getProp(lesson.id);
    let arr = Number(lesson.price / 100)
      .toFixed(2)
      .toString()
      .split('.');
    if (issues.length) {
      issues = issues.map(r => {
        let classTime = dayjs(r.classTime).format('MM月-DD日');
        return {
          ...r,
          classTime,
          week: getWeek(r.classTime)
        };
      });
    } else {
      issues = [
        {
          classTime: dayjs(data.issueDate).format('MM月-DD日'),
          timeDuration: data.timeDuration,
          week: getWeek(data.issueDate)
        }
      ];
    }
    httpData.data = {
      ...data,
      issueDate: dayjs(data.issueDate).format('YYYY-MM-DD'),
      week: getWeek(data.issueDate),
      location: lesson.location,
      price: Number(lesson.price / 100).toFixed(2),
      inter: arr[0],
      decimal: arr[1],
      issues
    };
  };
  // 支付
  const httpPay = async () => {
    // 这里是去卡豆支付
    if (!wxSelect.value) {
      let activeVal = usableVal.value.find(r => r.isAcvive);
      let propData = await uni.$uv.http.post('app/lesson/purchase', {
        recordID: activeVal.id,
        timetableID: routerVal.id
      });

      uni.$uv.route({
        url: '/pages/pay/results',
        params: {
          id: propData.id,
          timetableID: routerVal.id,
          out_trade_no: propData.out_trade_no
        }
      });
      return;
    }
    // 下面是微信支付
    let data = await uni.$uv.http.post('app/transaction/prepay', {
      signType: 'RSA',
      timetableID: routerVal.id
    });
    let options = {
      provider: 'wxpay',
      timeStamp: data.timeStamp,
      nonceStr: data.nonceStr,
      package: `prepay_id=${data.prepay_id}`,
      signType: 'RSA',
      paySign: `${data.paySign}`,
      _debug: 1,
      success: function (res) {
        uni.$uv.route({
          url: '/pages/pay/results',
          params: {
            id: data.id,
            timetableID: data.timetableID,
            out_trade_no: data.out_trade_no
          }
        });
      },
      fail: function (err) {
      }
    };
    uni.requestPayment(options);
  };

  // #region 道具
  let permitVal = ref([]),
    usableVal = ref([]);
  const getProp = async val => {
    let { permit, usable } = await uni.$uv.http.post('app/package_offer/for_lesson', {
      lessonID: val
    });
    permitVal.value = permit;
    usableVal.value = usable.map((r, i) => {
      if (i === 0) r.isAcvive = true;
      return r;
    });
    // 默认微信支付
    wxSelect.value = true;
  };
  const onActiveProp = index => {
    wxSelect.value = false;
    usableVal.value.map((item, i) => {
      item.isAcvive = index === i;
    });
  };
  // 点击购买道具
  const onPay = val => {
    uni.$uv.route({
      url: '/pages/prop/pay',
      params: {
        id: val.id
      }
    });
  };
  // 选择微信支付
  let wxSelect = ref(false);
  const onActiveWx = () => {
    // 如果没有可用道具，那就必须要用微信支付
    if (!usableVal.value.length) {
      wxSelect.value = true;
    } else {
      wxSelect.value = !wxSelect.value;
    }
    // 选择了微信支付
    if (wxSelect.value) {
      usableVal.value.map(r => (r.isAcvive = false));
    } else {
      usableVal.value[0].isAcvive = true;
    }
  };
  // #endregion
</script>

<style lang="scss" scoped>
  .fw-b {
    font-weight: bold;
  }

  .pay {
    background-color: #fafafa;
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Source Han Sans CN;
    color: #000000;
    box-sizing: border-box;
    font-size: 24.419rpx;

    &-content {
      padding: 0 26rpx;
      flex: 1;
      overflow-y: auto;
      padding-bottom: 160rpx;
    }

    &-info {
      border-radius: 14rpx;
      background-color: #fff;
      box-shadow: 0px 1px 4px 0px #00000040;
      padding: 47.093rpx 48.837rpx;

      .box {
        &-title {
          font-size: 34.884rpx;
          font-weight: 700;
          line-height: 30px;
          margin-bottom: 41.86rpx;
        }
        &-teacher {
          margin-top: 52rpx;
          display: flex;
          &-info {
            margin-left: 36.628rpx;
            color: #959595;

            .name {
              font-size: 27.907rpx;
              color: #000;
            }
            .time {
              margin: 6.977rpx 0;
            }
          }
        }
        &-merchant {
          margin-top: 33rpx;
          display: flex;
          &-address {
            display: flex;
            flex-direction: column;
            margin-left: 36.628rpx;
            .name {
              font-size: 27.907rpx;
              &-tips {
                color: #959595;
                margin-left: 9rpx;
              }
            }
            .address {
              margin-top: 19.186rpx;
              color: #959595;
            }
          }
        }
      }
    }
    // 微信支付
    &-wx {
      border-radius: 14rpx;
      background-color: #fff;
      box-shadow: 0px 1px 4px 0px #00000040;
      padding: 47.093rpx 48.837rpx 64.535rpx 48.837rpx;
      margin-top: 15.698rpx;
      &-label {
        font-size: 34.884rpx;
        font-weight: bold;
        margin-bottom: 50.581rpx;
      }
      &-oper {
        display: flex;
        justify-content: space-between;
        .alert {
          color: #656565;
        }
      }
    }
    // 总价
    &-money {
      border-radius: 14rpx;
      background-color: #fff;
      box-shadow: 0px 1px 4px 0px #00000040;
      padding: 48.837rpx 0 48.837rpx 0;
      margin-top: 15.698rpx;

      &-tips {
        color: #959595;
        padding: 0 48.837rpx;
      }
      &-footer {
        padding: 0 48.837rpx;
        font-size: 34.884rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      &-number {
        font-size: 69.767rpx;
        &-icon {
          font-size: 34.884rpx;
        }
        &-text {
          font-weight: bold;
        }
        &-decimal {
          font-size: 27.907rpx;
        }
      }
    }

    &-footer {
      background-color: #000;
      height: 139.535rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      bottom: 0;
      width: 100%;

      &-total {
        margin-left: 71.512rpx;
        font-size: 34.884rpx;
        display: flex;
        color: #fff;
        .total {
          font-size: 26.163rpx;
          font-weight: bold;
        }
        .text {
          font-weight: bold;
          font-size: 69.767rpx;
        }
        .decimal {
          font-weight: 200;
          font-size: 27.907rpx;
        }
      }

      &-btn {
        height: 100%;
        width: 256.395rpx;
        background-color: #ff7a66;
        font-size: 35rpx;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
      }
    }
  }
  .radio-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 37rpx;
    width: 37rpx;
    border-radius: 50%;
    background-color: #ff7a66;
    transition: background-color 0.3s;
    .circle {
      height: 29rpx;
      width: 29rpx;
      background-color: #ff7a66;
      border-radius: 50%;
      transition: background-color 0.3s;
      box-sizing: border-box;
    }
  }
</style>
